<template>
  <n-modal v-model:show="showModal" preset="dialog" title="昵称修改" positive-text="修改" negative-text="算了"
    @positive-click="onPositiveClick">
    <n-input v-model:value="nameValue" type="text" placeholder="请输入要修改的昵称" />
  </n-modal>
  <n-modal :on-after-leave="modelClose" v-model:show="fshowModal" style="min-width: 300px; width: 40%"
    class="custom-card" preset="card" title="发送给:" size="huge" :bordered="false">
    <div>
      <div class="target">
        <div style="display: flex; align-items: center">
          <img src="@/assets/avator.jpg" style="width: 38px; height: 38px; border-radius: 4px" alt="" />
          <div style="margin-left: 20px">{{ toItem.userName }}</div>
        </div>
        <n-divider />
        <div style="max-height: 300px; overflow-y: scroll">
          <div v-for="e in fileList" style="
                display: flex;
                align-items: center;
                margin-top: 10px;
                justify-content: space-between;
              ">
            <div style="display: flex; flex: 1; align-items: center">
              <img :src="e.preicon" style="width: 38px; height: 38px; border-radius: 4px" alt="" />
              <div style="
                    margin-left: 20px;
                    max-height: 1.5em; /* 最大高度，等于一行的高度 */
                    overflow: hidden; /* 隐藏溢出的内容 */
                    display: -webkit-box; /* 使用弹性盒模型 */
                    line-clamp: 1;
                    -webkit-line-clamp: 1; /* 限制行数为1 */
                    -webkit-box-orient: vertical;
                    overflow-y: hidden; /* 垂直排列 */
                    text-overflow: ellipsis; /* 显示省略号 */
                    flex: 1;
                  ">
                {{ e.file.name }}
              </div>
            </div>
            <n-button @click="handlePreview(e)" v-if="
              [
                'word',
                'video',
                'image',
                'textFile',
                'pdf',
                'ppt',
                'excel',
              ].includes(e.type)
            " style="margin-left: 5px" size="small" type="info">
              预览
            </n-button>
            <n-button style="margin-left: 5px" @click="handleDelete(i)" size="small" type="error">
              删除
            </n-button>
          </div>
        </div>
        <n-input style="font-size: 14px; margin-top: 10px; text-indent: 1em" v-model:value="fileText"
          placeholder="给朋友留言" />
      </div>
    </div>
    <template #footer>
      <div style="
            width: 100%;
            justify-content: space-around;
            margin: 0 auto;
            display: flex;
          ">
        <n-button @click="handleFileSend()" :loading="uploadLoading" type="primary">
          发送({{ fileList.length }})
        </n-button>
        <n-button @click="fshowModal = false" type="tertiary">
          取消
        </n-button>
      </div>
    </template>
  </n-modal>
  <n-modal v-model:show="previewModal" style="min-width: 350px; width: 90%" preset="card"
    title="文件预览(不支持ppt、xls、doc文件预览)" size="huge" :bordered="false">
    <div class="previewBox">

      <Suspense>
        <!-- 主内容 -->
        <template #default>
          <vue-office-docx v-if="preViewItem.type == 'word'" style="height: 100vh" :src="preViewItem.blobUrl" />
        </template>
        <template #fallback>
          <h1>DOCX文件努力加载中，请稍候，不要离开！</h1>
        </template>
      </Suspense>

      <Suspense>
        <!-- 主内容 -->
        <template #default>
          <vue-office-excel v-if="preViewItem.type == 'excel'" :src="preViewItem.blobUrl" style="height: 100vh" />
        </template>
        <template #fallback>
          <h1>EXCEL文件加载中，请稍候，不要离开！</h1>
        </template>
      </Suspense>

      <Suspense>
        <!-- 主内容 -->
        <template #default>
          <vue-office-pdf v-if="preViewItem.type == 'pdf'" style="height: 100vh" :src="preViewItem.blobUrl" />
        </template>
        <template #fallback>
          <h1>PDF文件加载中，请稍候，不要离开！</h1>
        </template>
      </Suspense>




      <iframe v-if="['textFile', 'ppt'].includes(preViewItem.type)" :src="preViewItem.type == 'ppt'
        ? `/PPTXjs-master/index.html?url=${preViewItem.blobUrl}`
        : preViewItem.blobUrl
        " frameborder="0" style="width: 100%; height: 100%; min-height: 100vh"></iframe>
      <img v-if="preViewItem.type == 'image'" :src="preViewItem.blobUrl" style="height: 100%; width: 100%" alt="" />
      <video v-if="preViewItem.type == 'video'" :src="preViewItem.blobUrl" style="height: 100%; width: 100%" autoplay
        controls></video>
    </div>
  </n-modal>
  <div class="main">
    <div v-if="reConnectLoading"
      style="position: absolute;top:0;height: 40px;display: flex; align-items: center; justify-content: center; color: #fff; width: 100%;background-color: #0070d9;z-index: 999;">
      断线重连中...</div>
    <div class="left" ref="a">
      <div class="avator"></div>
      <div @click="handlePopModifyInfo(vuserinfo.userName)" style="display: flex; align-items: center; cursor: pointer">
        <div style="
              width: 100%;
              box-sizing: border-box;
              text-align: center;
              font-size: 12px;
              margin-right: 6px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 10px;
              color: white;
              line-height: 1.5em; /* 行高 */
              max-height: 1.5em; /* 最大高度，等于一行的高度 */
              overflow: hidden; /* 隐藏溢出的内容 */
              display: -webkit-box; /* 使用弹性盒模型 */
              line-clamp: 1;
              -webkit-line-clamp: 1; /* 限制行数为1 */
              -webkit-box-orient: vertical;
              overflow-y: hidden; /* 垂直排列 */
              text-overflow: ellipsis; /* 显示省略号 */
            ">
          {{ vuserinfo.userName }}
        </div>
        <span style="color: #fff; font-size: 15px; margin-top: 8px">〉</span>
      </div>

      <div class="btns">
        <svg @click="chooseIndex = 0" t="1721702934626" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="4294" width="128" height="128">
          <path
            d="M512 457.031816A55.033029 55.033029 0 1 0 567.033029 512.064845 55.033029 55.033029 0 0 0 512 457.031816z m220.132117 0A55.033029 55.033029 0 1 0 786.738533 512.064845a55.033029 55.033029 0 0 0-55.033029-55.033029z m-439.837621 0A55.033029 55.033029 0 1 0 346.900913 512.064845a55.033029 55.033029 0 0 0-55.03303-55.033029z"
            :fill="chooseIndex == 0 ? '#1afa29' : '#fff'" p-id="4295"></path>
          <path
            d="M917.70861 637.062345a405.70861 405.70861 0 0 1-93.854778 127.983789A442.823909 442.823909 0 0 1 682.645052 853.354948a475.246469 475.246469 0 0 1-324.225598 7.252415 35.835461 35.835461 0 0 0-29.436272 2.986288L213.37116 929.718609l-18.344343-154.860384a35.835461 35.835461 0 0 0-10.238703-20.904019 389.923943 389.923943 0 0 1-115.18541-274.738533 378.832015 378.832015 0 0 1 34.12901-157.846673 405.70861 405.70861 0 0 1 93.854778-127.983789A442.823909 442.823909 0 0 1 341.354948 104.223172a474.393244 474.393244 0 0 1 343.849779 0 441.117458 441.117458 0 0 1 138.649105 87.882201 406.135223 406.135223 0 0 1 93.854778 127.983789 380.111852 380.111852 0 0 1 0 315.266733zM981.273892 291.932729a476.099694 476.099694 0 0 0-110.492671-152.300709 511.935155 511.935155 0 0 0-160.406348-102.387031 546.91739 546.91739 0 0 0-396.749746 0 511.935155 511.935155 0 0 0-162.539411 102.387031A478.232757 478.232757 0 0 0 42.726108 291.932729a451.782774 451.782774 0 0 0-42.661263 187.282944 461.168252 461.168252 0 0 0 127.983789 316.119958l23.037082 196.668422a36.262073 36.262073 0 0 0 35.835461 31.995947 36.262073 36.262073 0 0 0 17.91773-4.692739l148.461195-85.322526a547.344003 547.344003 0 0 0 358.354608-13.651604 511.935155 511.935155 0 0 0 162.539412-102.387031A477.806145 477.806145 0 0 0 981.273892 666.925229a453.915837 453.915837 0 0 0 0-374.9925z"
            :fill="chooseIndex == 0 ? '#1afa29' : '#fff'" p-id="4296"></path>
        </svg>
        <svg @click="chooseIndex = 1" t="1721703070716" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="5406" width="128" height="128">
          <path
            d="M781.041526 702.256158c-16.83134 0-34.491559-1.680269-52.873208-5.064342-85.793992-15.801894-151.311171-82.962503-213.415624-152.277172-62.652945 69.642127-129.096217 136.478348-217.570247 152.294568-70.713528 12.640901-130.713041 0.388856-173.508729-35.43607-40.167838-33.624818-61.400419-85.202521-61.400419-149.156088 0-64.520479 21.726837-116.567879 62.833047-150.514015 43.171242-35.655058 102.770642-47.420009 172.33909-34.026978 87.798649 16.901948 154.213267 86.10303 217.33284 156.718321 62.184271-69.613474 127.35148-138.577149 212.878388-156.647713l0 0c67.512626-14.261818 128.272455-3.003404 171.080423 31.705096 41.557488 33.694403 64.444754 87.947028 64.444754 152.765289 0 64.296375-21.394263 116.095112-61.869093 149.797701C869.62198 688.800705 828.659033 702.256158 781.041526 702.256158zM541.569456 514.873444c60.654428 67.89125 119.423927 129.252783 193.847963 142.959969 58.313104 10.744715 106.824981 1.688455 140.287093-26.172079 31.04711-25.853831 47.458895-67.01837 47.458895-119.045303 0-53.279461-17.161868-95.356788-49.629327-121.68134-33.737382-27.353998-81.32112-35.529191-137.603984-23.635303C661.437497 383.037836 602.76112 446.251553 541.569456 514.873444zM243.962338 362.741581c-37.352723 0-69.124334 10.190083-93.373621 30.216185-31.596625 26.093285-48.296983 67.471694-48.296983 119.659287 0 51.728128 16.276708 92.695169 47.070039 118.471229 33.419134 27.975145 82.102926 37.217646 140.779304 26.728758 77.165474-13.795191 136.761803-74.853825 197.828624-142.966109C426.068885 445.440072 366.364085 382.095371 289.87911 367.369995 273.809109 364.277564 258.462586 362.741581 243.962338 362.741581z"
            :fill="chooseIndex == 1 ? '#1afa29' : '#fff'" p-id="5407"></path>
        </svg>
      </div>
      <div>
        <svg @click="cleardata" style="
              position: absolute;
              bottom: 10px;
              left: 50%;
              transform: translateX(-50%);
            " t="1721703479464" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="6453" width="128" height="128">
          <path
            d="M768.43584 896a64 64 0 1 1 0 128H192.30784c-84.608 0-143.04-31.104-171.52-93.76-18.816-41.472-21.44-75.328-20.672-165.76L0.30784 736v-448c0-8 0-14.72-0.192-28.48-0.768-90.432 1.856-124.288 20.672-165.76C49.26784 31.104 107.69984 0 192.30784 0h576.128a64 64 0 1 1 0 128H192.30784c-37.952 0-49.216 6.016-55.04 18.688-7.808 17.28-9.728 42.752-9.152 111.68L128.30784 288v448c0 8.512 0 15.424-0.192 29.632-0.64 68.928 1.344 94.4 9.216 111.68 5.76 12.672 17.024 18.688 54.976 18.688h576.128z"
            fill="#ffffff" p-id="6454"></path>
          <path
            d="M761.65184 268.8a52.48 52.48 0 0 1 36.352 14.848L991.02784 476.16c9.728 9.728 15.36 23.04 15.36 36.352a51.2 51.2 0 0 1-15.36 36.352l-193.536 190.976a51.2 51.2 0 0 1-72.704-0.512 51.2 51.2 0 0 1 0.512-72.704l156.672-154.112-156.672-155.648a51.2 51.2 0 0 1 0-72.704 49.92 49.92 0 0 1 36.352-15.36z"
            fill="#ffffff" p-id="6455"></path>
          <path
            d="M435.50784 460.8h487.936c28.672 0 51.2 23.04 51.2 51.2 0 28.16-23.04 51.2-51.2 51.2H435.50784c-28.672 0-51.2-23.04-51.2-51.2 0-28.16 22.528-51.2 51.2-51.2z"
            fill="#ffffff" p-id="6456"></path>
        </svg>
      </div>
    </div>
    <div :style="{
      width: fitShow ? centerWidth + 'px' : 'auto',
      flex: !fitShow ? '1' : null,
    }" ref="b" :class="flag ? 't' : ''" class="center">
      <div style="
            width: 100%;
            padding: 0 6px;
            box-sizing: border-box;
            height: 66px;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
          ">
        <n-input v-model:value="iptValue" type="text" @input="searchChange" placeholder="搜索用户"
          style="text-indent: 1em" />
        <n-button style="margin-left: 4px">
          <template #icon> + </template>
        </n-button>
      </div>
      <n-infinite-scroll :style="{
        height: xheight + 'px',
      }" :distance="10" @load="handleLoad">
        <div v-for="(e, i) in vlist" :key="e._id" @click="chooseListMember(e, i)" style="cursor: pointer"
          :class="i == cIndex ? 'item acitem' : 'item'">
          <div style="position: relative">
            <img src="@/assets/avator.jpg" style="width: 58px; height: 58px; border-radius: 4px" alt="" />
            <div v-show="cunreadnum(e.lastMsg) != 0" style="
                  position: absolute;
                  right: -6px;
                  width: 18px;
                  height: 18px;
                  border-radius: 50%;
                  background-color: red;
                  top: -5px;
                  font-size: 10px;
                  color: #fff;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-weight: 600;
                ">
              {{ cunreadnum(e.lastMsg) }}
            </div>
          </div>

          <div class="cright">
            <div class="top">
              <div style="
                    display: flex;
                    align-items: center;
                    max-width: 70px;
                    max-height: 1.5em; /* 最大高度，等于一行的高度 */
                    overflow: hidden; /* 隐藏溢出的内容 */
                    display: -webkit-box; /* 使用弹性盒模型 */
                    line-clamp: 1;
                    -webkit-line-clamp: 1; /* 限制行数为1 */
                    -webkit-box-orient: vertical;
                    overflow-y: hidden; /* 垂直排列 */
                    text-overflow: ellipsis;
                  ">
                {{ e.userName }}

              </div>
              <div style="display: flex;align-items: center;   ">
                <div style="
                      width: 10px;
                      height: 10px;
                      border-radius: 50%;
                      margin-right: 10px;
            
                    " :style="{
                      background: e.isOnline ? '#41e576' : 'gray',
                    }"></div>


                <div style="
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                  ">
                  <div style="color: #999999; font-size: 10px">
                    {{ dealTime(e.loginTime).split(" ")[0] }}
                  </div>
                  <div style="color: #999999; font-size: 10px">
                    {{ dealTime(e.loginTime).split(" ")[1] }}
                  </div>
                </div>
              </div>
            </div>
            <div style="color: #999999">
              <div style="
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  ">
                {{ clastmsg(e.lastMsg) }}
              </div>
            </div>
          </div>
        </div>
      </n-infinite-scroll>
    </div>
    <div v-if="!fitShow" @mouseenter="enter" style="
          background-color: #f5f5f5;
          position: absolute;
          top: 0;
          left: 80px;
          width: calc(100% - 80px);
        " :style="{
          zIndex: isDetail ? 99 : -1,
        }" class="right">
      <template v-if="toItem.userName">
        <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              height: 66px;
              background-color: white;
              display: flex;
              align-items: center;
              font-size: 18px;
              padding: 0 30px;
              background: #f5f5f5;
              box-sizing: border-box;
              border: 1px solid #e7e7e7;
            ">
          <div v-if="!fitShow">
            <n-icon @click="backhome" size="18">
              <log-in-icon></log-in-icon>
            </n-icon>
          </div>
          <div>{{ toItem.userName }}</div>

        </div>
        <div class="rbottom" style="width: 100%; box-sizing: border-box">
          <n-split :on-update:size="tt" direction="vertical" :default-size="0.6" style="height: 100%" min="200px"
            max="500px">
            <template #1>
              <div id="conversationalDiv" :style="{
                height: autoYHeight + 'px',
              }" style="
                    padding: 20px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    overflow-y: scroll;
                  ">
                <template v-for="e in msglist">
                  <template v-if="e.fid !== id">
                    <div class="litem" style="
                          width: 100%;
                          margin-top: 10px;
                          display: flex;
                          flex-shrink: 0;
                          height: auto;
                          justify-content: flex-start;
                        ">
                      <div style="
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            width: 100%;
                          ">
                        <img style="width: 40px; height: 40px; margin: 0 10px" src="@/assets/avator.jpg" alt=""
                          srcset="" />
                        <div style="
                              display: flex;
                              flex-direction: column;
                              min-height: 70px;
                              width: 100%;
                            ">
                          <div style="color: #b2b2b2; margin-bottom: 6px">
                            {{ wname(e.fid) }}
                          </div>
                          <div style="width: 80%; display: flex">
                            <div v-if="e.type == 'text'" style="
                                  overflow: hidden;
                                  padding: 6px 8px;
                                  border-radius: 4px;
                                  display: inline-block;
                                  color: black;
                                  box-sizing: border-box;
                                  background-color: #ffffff;
                                ">
                              {{ e.content }}
                            </div>
                            <div v-if="e.type == 'image'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <img style="max-width: 200px; text-align: " :src="e.content" alt="" />
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>


                                  <n-button :loading="btnLoading" size="tiny" color="#8a2be2"
                                    @click="handleDownload(e.content, e.remark)" secondary strong>下载</n-button>

                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'video'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <video style="max-width: 200px" :src="e.content" muted autoplay="autoplay"
                                loop="loop"></video>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'word'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">

                              <div style="display: flex;align-items: center;">
                                <img :src="word" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>


                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'ppt'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="ppt" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>

                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>

                            </div>
                            <div v-if="e.type == 'pdf'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="ppt" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'textFile'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="text" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'zip'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="zip" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>

                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'excel'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="excel" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'exe'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="exe" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>

                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>

                            <div v-if="e.type == 'unknown'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="unknown" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>

                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                          </div>
                          <div style="
                                font-size: 12px;
                                color: #d3d3d3;
                                margin-top: 3px;
                              ">
                            发送于 {{ toTime(e.time) }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div class="ritem" style="
                          width: 100%;
                          display: flex;
                          margin-top: 10px;
                          flex-shrink: 0;
                          justify-content: flex-start;
                        ">
                      <div style="
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            flex-direction: row-reverse;
                            width: 100%;
                          ">
                        <img style="width: 40px; height: 40px; margin: 0 10px" src="@/assets/avator.jpg" alt=""
                          srcset="" />
                        <div style="
                              display: flex;
                              flex-direction: column;
                              align-items: flex-end;
                              min-height: 70px;
                              width: 100%;
                            ">
                          <div style="
                                color: #b2b2b2;
                                margin-bottom: 6px;
                                display: flex;
                                align-items: center;
                              ">
                            {{ wname(e.fid) }}
                          </div>
                          <div style="
                                width: 80%;
                                display: flex;
                                justify-content: flex-end;
                              ">
                            <div v-if="e.type == 'text'" style="
                                  overflow: hidden;
                                  padding: 6px 8px;
                                  border-radius: 4px;
                                  display: inline-block;
                                  color: black;
                                  box-sizing: border-box;
                                  background-color: #89d961;
                                ">
                              {{ e.content }}
                            </div>
                            <div v-if="e.type == 'image'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <img style="max-width: 200px; text-align: " :src="e.content" alt="" />
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>

                            </div>
                            <div v-if="e.type == 'video'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <video style="max-width: 200px" :src="e.content" muted autoplay="autoplay"
                                loop="loop"></video>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'word'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;
                                  align-items: center;"> <img :src="word" style="height: 60px; margin-right: 20px"
                                  alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>


                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'ppt'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style=" display: flex;
                                  align-items: center;"> <img :src="ppt" style="height: 60px; margin-right: 20px"
                                  alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'textFile'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="  display: flex;
                                  align-items: center;"> <img :src="text" style="height: 60px; margin-right: 20px"
                                  alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>

                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>

                            </div>
                            <div v-if="e.type == 'pdf'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;
                                  align-items: center;">
                                <img :src="pdf" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>


                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>

                            </div>
                            <div v-if="e.type == 'excel'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;
                      
                                  align-items: center;">
                                <img :src="excel" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'exe'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="   display: flex;
                                  align-items: center;">

                                <img :src="exe" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>

                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>



                            </div>
                            <div v-if="e.type == 'unknown'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style=" display: flex;
                                  align-items: center;">
                                <img :src="unknown" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>

                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                          </div>
                          <div style="
                                font-size: 12px;
                                color: #d3d3d3;
                                margin-top: 3px;
                              ">
                            发送于 {{ toTime(e.time) }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </template>
              </div>
            </template>
            <template #2>
              <div style="height: 100%; position: relative">
                <n-button @click.stop="sendMsg" style="
                      position: absolute;
                      bottom: 14px;
                      right: 14px;
                      z-index: 999;
                    " tertiary type="primary">
                  发送(移动端)
                </n-button>
                <div style="
                      width: 100%;
                      height: 40px;
                      margin-top: 6px;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    ">
                  <div style="display: flex; align-items: center">
                    <n-popover trigger="click" :keep-alive-on-hover="true">
                      <template #trigger>
                        <svg style="width: 24px; height: 24px; margin: 0 10px" t="1721724153655" class="icon"
                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4701"
                          width="128" height="128">
                          <path
                            d="M334.955789 458.105263h1.616843a65.212632 65.212632 0 1 0-1.616843 0zM688.505263 458.105263h1.616842a65.212632 65.212632 0 1 0-1.616842 0zM749.945263 540.564211a43.654737 43.654737 0 0 0-35.031579 0 48.774737 48.774737 0 0 0-26.947368 29.911578 246.837895 246.837895 0 0 1-26.947369 53.894737A177.583158 177.583158 0 0 1 512 697.936842a199.141053 199.141053 0 0 1-156.025263-80.842105 180.008421 180.008421 0 0 1-26.947369-55.781053 49.044211 49.044211 0 0 0-63.865263-26.947368 56.32 56.32 0 0 0-25.061052 70.063158l8.623158 18.054737a346.004211 346.004211 0 0 0 34.223157 61.44 292.109474 292.109474 0 0 0 229.052632 115.60421 269.473684 269.473684 0 0 0 219.890526-113.178947 208.303158 208.303158 0 0 0 44.463158-80.842106 42.576842 42.576842 0 0 0 0-35.031579 48.774737 48.774737 0 0 0-26.408421-29.911578z"
                            fill="#bfbfbf" p-id="4702"></path>
                          <path
                            d="M512 0A516.311579 516.311579 0 0 0 0 512a516.311579 516.311579 0 0 0 512 512 516.311579 516.311579 0 0 0 512-512A516.042105 516.042105 0 0 0 512 0z m411.755789 512A415.258947 415.258947 0 0 1 512 924.294737 415.258947 415.258947 0 0 1 100.244211 512 415.258947 415.258947 0 0 1 512 100.244211 415.258947 415.258947 0 0 1 923.755789 512z"
                            fill="#bfbfbf" p-id="4703"></path>
                        </svg>
                      </template>
                      <Picker :data="emojiIndex" :emojiSize="18" :showSearch="false" :showPreview="false"
                        :infiniteScroll="false" :i18n="emojiI18n" set="apple" @select="handleEmoji" />
                    </n-popover>

                    <div style="width: 48px; height: 24px">
                      <n-upload style="width: 48px !important" directory-dnd multiple :custom-request="() => { }"
                        @change="customRequest">
                        <svg style="width: 24px; height: 24px; margin: 0 10px" t="1721724225164" class="icon"
                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5854"
                          width="128" height="128">
                          <path
                            d="M912 208H427.872l-50.368-94.176A63.936 63.936 0 0 0 321.056 80H112c-35.296 0-64 28.704-64 64v736c0 35.296 28.704 64 64 64h800c35.296 0 64-28.704 64-64v-608c0-35.296-28.704-64-64-64z m-800-64h209.056l68.448 128H912v97.984c-0.416 0-0.8-0.128-1.216-0.128H113.248c-0.416 0-0.8 0.128-1.248 0.128V144z m0 736v-96l1.248-350.144 798.752 1.216V784h0.064v96H112z"
                            fill="#bfbfbf" p-id="5855"></path>
                        </svg>
                      </n-upload>
                    </div>

                    <svg style="width: 24px; height: 24px; margin: 0 10px" t="1721724272047" class="icon"
                      viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6920" width="128"
                      height="128">
                      <path
                        d="M312.459636 881.524364l10.821819 5.329454A423.726545 423.726545 0 0 0 512 930.909091c230.981818 0 418.909091-182.714182 418.909091-407.272727C930.909091 299.077818 742.981818 116.363636 512 116.363636S93.090909 299.077818 93.090909 523.636364c0 86.551273 27.997091 169.518545 80.989091 239.918545l11.310545 15.010909-50.059636 140.241455 177.128727-37.282909zM512 1000.727273c-72.564364 0-142.661818-15.453091-208.546909-45.986909L129.349818 991.418182a58.181818 58.181818 0 0 1-66.746182-76.544l44.544-124.788364C52.200727 710.912 23.272727 619.194182 23.272727 523.636364 23.272727 260.561455 242.525091 46.545455 512 46.545455s488.727273 214.016 488.727273 477.090909S781.474909 1000.727273 512 1000.727273z m-186.181818-477.090909A46.545455 46.545455 0 1 1 232.727273 523.636364 46.545455 46.545455 0 0 1 325.818182 523.636364m232.727273 0A46.545455 46.545455 0 1 1 465.454545 523.636364 46.545455 46.545455 0 0 1 558.545455 523.636364m232.727272 0A46.545455 46.545455 0 1 1 698.181818 523.636364 46.545455 46.545455 0 0 1 791.272727 523.636364"
                        fill="#bfbfbf" p-id="6921"></path>
                    </svg>
                  </div>
                  <div>
                    <n-spin size="small" :show="sloading">
                      <svg @click="IsendEmail" style="width: 24px; height: 24px; margin: 0 10px" t="1721724360269"
                        class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        p-id="8950" width="128" height="128">
                        <path
                          d="M284.484267 128.546133c-136.669867 101.973333-153.6 325.717333-32.034134 551.253334 118.801067 220.3648 307.063467 337.442133 501.725867 277.333333 50.602667-15.616 99.157333-58.862933 99.157333-107.5712 0.017067-84.667733-96.8704-253.269333-169.437866-266.359467-20.360533-3.652267-44.970667 3.6864-81.578667 19.490134-3.7888 1.6384-7.68 3.362133-11.6736 5.1712l-9.1136 4.1984c-8.9088 4.1472-16.401067 7.7824-29.1328 14.08l-5.4784 2.696533-0.256-0.238933a122.043733 122.043733 0 0 1-6.638933-6.9632c-10.496-11.844267-22.869333-29.2864-35.345067-49.800534l-3.618133-6.0416c-16.759467-28.330667-31.6416-58.811733-41.3184-84.206933l-0.904534-2.440533 23.125334-9.898667c4.778667-2.048 9.335467-4.078933 14.114133-6.212267l13.482667-6.0928 10.376533-4.829866c26.282667-12.4416 41.8816-21.4528 50.653867-30.993067C620.714667 366.557867 521.352533 103.082667 439.825067 87.893333c-48.503467-9.045333-107.1104 6.7072-150.5792 37.205334l-4.778667 3.447466z m142.830933 26.453334c10.410667 1.9456 40.7552 48.810667 63.5392 109.226666 11.383467 30.1568 20.002133 60.586667 24.029867 84.599467l0.682666 4.164267a139.946667 139.946667 0 0 1 1.774934 20.48l-0.1024 3.140266-4.3008 2.474667-2.3552 1.314133c-7.543467 4.096-17.527467 8.994133-29.559467 14.523734l-19.797333 8.891733c-6.997333 3.072-14.062933 6.144-22.715734 9.813333l-31.402666 13.3632-4.676267 2.184534-1.570133 0.836266-0.887467-0.887466c-1.877333-1.28-3.498667 3.293867-15.991467 38.775466 20.736 88.814933 108.3392 232.942933 162.133334 233.028267l6.638933-0.733867c1.416533-0.170667 2.218667-0.324267 2.952533-0.529066l4.539734-1.621334 3.908266-1.6896 14.08-6.826666 23.944534-11.7248c3.6864-1.757867 7.168-3.413333 11.0592-5.205334l10.922666-4.949333 5.2224-2.286933a303.8208 303.8208 0 0 1 31.9488-12.100267l3.805867-1.058133c4.608-1.2288 7.338667-1.6896 6.656-1.809067 34.133333 6.144 113.288533 143.872 113.271467 199.168 0 11.605333-25.736533 34.542933-51.029334 42.359467-158.037333 48.7936-316.484267-49.732267-421.495466-244.5312-107.076267-198.6048-92.928-385.262933 12.765866-464.128 29.422933-21.9648 71.697067-33.911467 102.007467-28.2624z"
                          fill="#bfbfbf" p-id="8951"></path>
                        <path
                          d="M670.1056 75.946667c92.9792 75.776 120.149333 191.3344 79.906133 305.373866l-2.218666 6.109867-63.931734-23.927467c32.836267-87.773867 14.848-173.192533-52.5312-230.997333l-4.369066-3.652267 43.144533-52.906666z"
                          fill="#bfbfbf" p-id="8952"></path>
                      </svg>
                    </n-spin>
                    <!-- <svg style="width: 24px; height: 24px; margin: 0 10px" t="1721724383898" class="icon"
                        viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10252"
                        width="128" height="128">
                        <path
                          d="M945.643 234.058h-34.627c-9.585 0-17.325 8.19-17.325 18.338v-3.938l-173.137 183.352v-161.1c0-40.5-31.028-73.35-69.278-73.35h-519.457c-38.25 0-69.278 32.828-69.278 73.35v476.73c0 40.477 31.005 73.328 69.278 73.328h519.457c38.25 0 69.278-32.85 69.278-73.328v-161.123l173.137 183.33v-3.893c0 10.102 7.74 18.315 17.325 18.315h34.627c9.562 0 17.325-8.213 17.325-18.315v-513.36c0-10.148-7.762-18.338-17.325-18.338zM651.275 505.16l-3.713 3.915 3.713 3.915v234.45h-519.457v-476.73h519.457v234.45zM893.713 665.922l-148.162-156.847 148.162-156.87v313.717z"
                          p-id="10253" fill="#bfbfbf"></path>
                      </svg> -->
                  </div>
                </div>
                <div class="nipt">
                  <n-input :style="{ height: autoHeight + 'px' }" style="font-size: 18px" @keyup.enter.exact="sendMsg"
                    @keyup.ctrl.enter="lineFeed()" autofocus v-model:value="textValue" type="textarea" autosize
                    placeholder="" />
                </div>
              </div>
            </template>
          </n-split>
        </div>
      </template>
      <template v-else>
        <div style="
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            ">
          <img src="@/assets/null.png" style="width: 200px" />
        </div>
      </template>
    </div>

    <div v-else @mouseenter="enter" style="background-color: #f5f5f5; flex: 1" class="right">
      <template v-if="toItem.userName">
        <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              height: 66px;
              background-color: white;
              display: flex;
              align-items: center;
              font-size: 18px;
              padding: 0 30px;
              background: #f5f5f5;
              box-sizing: border-box;
              border: 1px solid #e7e7e7;
            ">
          <div v-if="!fitShow">
            <n-button color="#8a2be2">
              <template #icon>
                <n-icon>
                  <LogInIcon />
                </n-icon>
              </template>
              #8a2be2
            </n-button>
          </div>
          <div>{{ toItem.userName }}</div>
        </div>
        <div class="rbottom" style="width: 100%; box-sizing: border-box">
          <n-split :on-update:size="tt" direction="vertical" :default-size="0.6" style="height: 100%" min="200px"
            max="500px">
            <template #1>
              <div id="conversationalDiv" :style="{
                height: autoYHeight + 'px',
              }" style="
                    padding: 20px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    overflow-y: scroll;
                  ">
                <template v-for="e in msglist">
                  <template v-if="e.fid !== id">
                    <div class="litem" style="
                          width: 100%;
                          margin-top: 10px;
                          display: flex;
                          flex-shrink: 0;
                          height: auto;
                          justify-content: flex-start;
                        ">
                      <div style="
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            width: 100%;
                          ">
                        <img style="width: 40px; height: 40px; margin: 0 10px" src="@/assets/avator.jpg" alt=""
                          srcset="" />
                        <div style="
                              display: flex;
                              flex-direction: column;
                              min-height: 70px;
                              width: 100%;
                            ">
                          <div style="color: #b2b2b2; margin-bottom: 6px">
                            {{ wname(e.fid) }}
                          </div>
                          <div style="width: 80%; display: flex">
                            <div v-if="e.type == 'text'" style="
                                  overflow: hidden;
                                  padding: 6px 8px;
                                  border-radius: 4px;
                                  display: inline-block;
                                  color: black;
                                  box-sizing: border-box;
                                  background-color: #ffffff;
                                ">
                              {{ e.content }}
                            </div>
                            <div v-if="e.type == 'image'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <img style="max-width: 200px; text-align: " :src="e.content" alt="" />
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'video'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <video style="max-width: 200px" :src="e.content" muted autoplay="autoplay"
                                loop="loop"></video>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'word'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">

                              <div style="display: flex;align-items: center;">
                                <img :src="word" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>


                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'ppt'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="ppt" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>

                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>

                            </div>
                            <div v-if="e.type == 'pdf'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="ppt" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'textFile'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="text" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'zip'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="zip" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>

                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'excel'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="excel" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'exe'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="exe" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>

                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>

                            <div v-if="e.type == 'unknown'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #ffffff;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;align-items: center;">
                                <img :src="unknown" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>

                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                          </div>
                          <div style="
                                font-size: 12px;
                                color: #d3d3d3;
                                margin-top: 3px;
                              ">
                            发送于 {{ toTime(e.time) }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <template v-else>
                    <div class="ritem" style="
                          width: 100%;
                          display: flex;
                          margin-top: 10px;
                          flex-shrink: 0;
                          justify-content: flex-start;
                        ">
                      <div style="
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            flex-direction: row-reverse;
                            width: 100%;
                          ">
                        <img style="width: 40px; height: 40px; margin: 0 10px" src="@/assets/avator.jpg" alt=""
                          srcset="" />
                        <div style="
                              display: flex;
                              flex-direction: column;
                              align-items: flex-end;
                              min-height: 70px;
                              width: 100%;
                            ">
                          <div style="
                                color: #b2b2b2;
                                margin-bottom: 6px;
                                display: flex;
                                align-items: center;
                              ">
                            {{ wname(e.fid) }}
                          </div>
                          <div style="
                                width: 80%;
                                display: flex;
                                justify-content: flex-end;
                              ">
                            <div v-if="e.type == 'text'" style="
                                  overflow: hidden;
                                  padding: 6px 8px;
                                  border-radius: 4px;
                                  display: inline-block;
                                  color: black;
                                  box-sizing: border-box;
                                  background-color: #89d961;
                                ">
                              {{ e.content }}
                            </div>
                            <div v-if="e.type == 'image'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <img style="max-width: 200px; text-align: " :src="e.content" alt="" />
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>

                            </div>
                            <div v-if="e.type == 'video'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <video style="max-width: 200px" :src="e.content" muted autoplay="autoplay"
                                loop="loop"></video>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'word'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;
                                  align-items: center;"> <img :src="word" style="height: 60px; margin-right: 20px"
                                  alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>


                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'ppt'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style=" display: flex;
                                  align-items: center;"> <img :src="ppt" style="height: 60px; margin-right: 20px"
                                  alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'textFile'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="  display: flex;
                                  align-items: center;"> <img :src="text" style="height: 60px; margin-right: 20px"
                                  alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>

                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>

                            </div>
                            <div v-if="e.type == 'pdf'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;
                                  align-items: center;">
                                <img :src="pdf" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>


                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>

                            </div>
                            <div v-if="e.type == 'excel'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style="display: flex;
                      
                                  align-items: center;">
                                <img :src="excel" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>
                                  <n-button size="tiny" color="#8a2be2" @click="handlePreview(e, 1)" secondary
                                    strong>预览</n-button>
                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                            <div v-if="e.type == 'unknown'" style="
                                  padding: 8px 10px;
                                  box-sizing: border-box;
                                  background: #89d961;
                                  border-radius: 6px;
                                  display: flex;
                                  flex-direction: column;
                                  align-items: center;
                                ">
                              <div style=" display: flex;
                                  align-items: center;">
                                <img :src="unknown" style="height: 60px; margin-right: 20px" alt="" />
                                <div style="
                                    height: 60px;
                                    max-width: 200px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    overflow-y: scroll;
                                  ">
                                  {{ e.remark }}
                                </div>
                              </div>
                              <div
                                style="display: flex;align-items: center; width: 100%;margin-top: 10px;justify-content: flex-end">
                                <n-space>

                                  <n-button size="tiny" color="#8a2be2" @click="handleDownload(e.content, e.remark)"
                                    secondary strong>下载</n-button>
                                </n-space>

                              </div>
                            </div>
                          </div>
                          <div style="
                                font-size: 12px;
                                color: #d3d3d3;
                                margin-top: 3px;
                              ">
                            发送于 {{ toTime(e.time) }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                </template>
              </div>
            </template>
            <template #2>
              <div style="height: 100%; position: relative">
                <n-button @click.stop="sendMsg" style="
                      position: absolute;
                      bottom: 14px;
                      right: 14px;
                      z-index: 999;
                    " tertiary type="primary">
                  发送(移动端)
                </n-button>
                <div style="
                      width: 100%;
                      height: 40px;
                      margin-top: 6px;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    ">
                  <div style="display: flex; align-items: center">
                    <n-popover trigger="click" :keep-alive-on-hover="true">
                      <template #trigger>
                        <svg style="width: 24px; height: 24px; margin: 0 10px" t="1721724153655" class="icon"
                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4701"
                          width="128" height="128">
                          <path
                            d="M334.955789 458.105263h1.616843a65.212632 65.212632 0 1 0-1.616843 0zM688.505263 458.105263h1.616842a65.212632 65.212632 0 1 0-1.616842 0zM749.945263 540.564211a43.654737 43.654737 0 0 0-35.031579 0 48.774737 48.774737 0 0 0-26.947368 29.911578 246.837895 246.837895 0 0 1-26.947369 53.894737A177.583158 177.583158 0 0 1 512 697.936842a199.141053 199.141053 0 0 1-156.025263-80.842105 180.008421 180.008421 0 0 1-26.947369-55.781053 49.044211 49.044211 0 0 0-63.865263-26.947368 56.32 56.32 0 0 0-25.061052 70.063158l8.623158 18.054737a346.004211 346.004211 0 0 0 34.223157 61.44 292.109474 292.109474 0 0 0 229.052632 115.60421 269.473684 269.473684 0 0 0 219.890526-113.178947 208.303158 208.303158 0 0 0 44.463158-80.842106 42.576842 42.576842 0 0 0 0-35.031579 48.774737 48.774737 0 0 0-26.408421-29.911578z"
                            fill="#bfbfbf" p-id="4702"></path>
                          <path
                            d="M512 0A516.311579 516.311579 0 0 0 0 512a516.311579 516.311579 0 0 0 512 512 516.311579 516.311579 0 0 0 512-512A516.042105 516.042105 0 0 0 512 0z m411.755789 512A415.258947 415.258947 0 0 1 512 924.294737 415.258947 415.258947 0 0 1 100.244211 512 415.258947 415.258947 0 0 1 512 100.244211 415.258947 415.258947 0 0 1 923.755789 512z"
                            fill="#bfbfbf" p-id="4703"></path>
                        </svg>
                      </template>
                      <Picker :data="emojiIndex" :emojiSize="18" :showSearch="false" :showPreview="false"
                        :infiniteScroll="false" :i18n="emojiI18n" set="apple" @select="handleEmoji" />
                    </n-popover>

                    <div style="width: 48px; height: 24px">
                      <n-upload style="width: 48px !important" directory-dnd multiple :custom-request="() => { }"
                        @change="customRequest">
                        <svg style="width: 24px; height: 24px; margin: 0 10px" t="1721724225164" class="icon"
                          viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5854"
                          width="128" height="128">
                          <path
                            d="M912 208H427.872l-50.368-94.176A63.936 63.936 0 0 0 321.056 80H112c-35.296 0-64 28.704-64 64v736c0 35.296 28.704 64 64 64h800c35.296 0 64-28.704 64-64v-608c0-35.296-28.704-64-64-64z m-800-64h209.056l68.448 128H912v97.984c-0.416 0-0.8-0.128-1.216-0.128H113.248c-0.416 0-0.8 0.128-1.248 0.128V144z m0 736v-96l1.248-350.144 798.752 1.216V784h0.064v96H112z"
                            fill="#bfbfbf" p-id="5855"></path>
                        </svg>
                      </n-upload>
                    </div>

                    <svg style="width: 24px; height: 24px; margin: 0 10px" t="1721724272047" class="icon"
                      viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6920" width="128"
                      height="128">
                      <path
                        d="M312.459636 881.524364l10.821819 5.329454A423.726545 423.726545 0 0 0 512 930.909091c230.981818 0 418.909091-182.714182 418.909091-407.272727C930.909091 299.077818 742.981818 116.363636 512 116.363636S93.090909 299.077818 93.090909 523.636364c0 86.551273 27.997091 169.518545 80.989091 239.918545l11.310545 15.010909-50.059636 140.241455 177.128727-37.282909zM512 1000.727273c-72.564364 0-142.661818-15.453091-208.546909-45.986909L129.349818 991.418182a58.181818 58.181818 0 0 1-66.746182-76.544l44.544-124.788364C52.200727 710.912 23.272727 619.194182 23.272727 523.636364 23.272727 260.561455 242.525091 46.545455 512 46.545455s488.727273 214.016 488.727273 477.090909S781.474909 1000.727273 512 1000.727273z m-186.181818-477.090909A46.545455 46.545455 0 1 1 232.727273 523.636364 46.545455 46.545455 0 0 1 325.818182 523.636364m232.727273 0A46.545455 46.545455 0 1 1 465.454545 523.636364 46.545455 46.545455 0 0 1 558.545455 523.636364m232.727272 0A46.545455 46.545455 0 1 1 698.181818 523.636364 46.545455 46.545455 0 0 1 791.272727 523.636364"
                        fill="#bfbfbf" p-id="6921"></path>
                    </svg>
                  </div>
                  <div>
                    <n-spin size="small" :show="sloading">
                      <svg @click="IsendEmail" style="width: 24px; height: 24px; margin: 0 10px" t="1721724360269"
                        class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        p-id="8950" width="128" height="128">
                        <path
                          d="M284.484267 128.546133c-136.669867 101.973333-153.6 325.717333-32.034134 551.253334 118.801067 220.3648 307.063467 337.442133 501.725867 277.333333 50.602667-15.616 99.157333-58.862933 99.157333-107.5712 0.017067-84.667733-96.8704-253.269333-169.437866-266.359467-20.360533-3.652267-44.970667 3.6864-81.578667 19.490134-3.7888 1.6384-7.68 3.362133-11.6736 5.1712l-9.1136 4.1984c-8.9088 4.1472-16.401067 7.7824-29.1328 14.08l-5.4784 2.696533-0.256-0.238933a122.043733 122.043733 0 0 1-6.638933-6.9632c-10.496-11.844267-22.869333-29.2864-35.345067-49.800534l-3.618133-6.0416c-16.759467-28.330667-31.6416-58.811733-41.3184-84.206933l-0.904534-2.440533 23.125334-9.898667c4.778667-2.048 9.335467-4.078933 14.114133-6.212267l13.482667-6.0928 10.376533-4.829866c26.282667-12.4416 41.8816-21.4528 50.653867-30.993067C620.714667 366.557867 521.352533 103.082667 439.825067 87.893333c-48.503467-9.045333-107.1104 6.7072-150.5792 37.205334l-4.778667 3.447466z m142.830933 26.453334c10.410667 1.9456 40.7552 48.810667 63.5392 109.226666 11.383467 30.1568 20.002133 60.586667 24.029867 84.599467l0.682666 4.164267a139.946667 139.946667 0 0 1 1.774934 20.48l-0.1024 3.140266-4.3008 2.474667-2.3552 1.314133c-7.543467 4.096-17.527467 8.994133-29.559467 14.523734l-19.797333 8.891733c-6.997333 3.072-14.062933 6.144-22.715734 9.813333l-31.402666 13.3632-4.676267 2.184534-1.570133 0.836266-0.887467-0.887466c-1.877333-1.28-3.498667 3.293867-15.991467 38.775466 20.736 88.814933 108.3392 232.942933 162.133334 233.028267l6.638933-0.733867c1.416533-0.170667 2.218667-0.324267 2.952533-0.529066l4.539734-1.621334 3.908266-1.6896 14.08-6.826666 23.944534-11.7248c3.6864-1.757867 7.168-3.413333 11.0592-5.205334l10.922666-4.949333 5.2224-2.286933a303.8208 303.8208 0 0 1 31.9488-12.100267l3.805867-1.058133c4.608-1.2288 7.338667-1.6896 6.656-1.809067 34.133333 6.144 113.288533 143.872 113.271467 199.168 0 11.605333-25.736533 34.542933-51.029334 42.359467-158.037333 48.7936-316.484267-49.732267-421.495466-244.5312-107.076267-198.6048-92.928-385.262933 12.765866-464.128 29.422933-21.9648 71.697067-33.911467 102.007467-28.2624z"
                          fill="#bfbfbf" p-id="8951"></path>
                        <path
                          d="M670.1056 75.946667c92.9792 75.776 120.149333 191.3344 79.906133 305.373866l-2.218666 6.109867-63.931734-23.927467c32.836267-87.773867 14.848-173.192533-52.5312-230.997333l-4.369066-3.652267 43.144533-52.906666z"
                          fill="#bfbfbf" p-id="8952"></path>
                      </svg>
                    </n-spin>

                    <!-- <svg style="width: 24px; height: 24px; margin: 0 10px" t="1721724383898" class="icon"
                        viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10252"
                        width="128" height="128">
                        <path
                          d="M945.643 234.058h-34.627c-9.585 0-17.325 8.19-17.325 18.338v-3.938l-173.137 183.352v-161.1c0-40.5-31.028-73.35-69.278-73.35h-519.457c-38.25 0-69.278 32.828-69.278 73.35v476.73c0 40.477 31.005 73.328 69.278 73.328h519.457c38.25 0 69.278-32.85 69.278-73.328v-161.123l173.137 183.33v-3.893c0 10.102 7.74 18.315 17.325 18.315h34.627c9.562 0 17.325-8.213 17.325-18.315v-513.36c0-10.148-7.762-18.338-17.325-18.338zM651.275 505.16l-3.713 3.915 3.713 3.915v234.45h-519.457v-476.73h519.457v234.45zM893.713 665.922l-148.162-156.847 148.162-156.87v313.717z"
                          p-id="10253" fill="#bfbfbf"></path>
                      </svg> -->
                  </div>
                </div>
                <div class="nipt">
                  <n-input :style="{ height: autoHeight + 'px' }" style="font-size: 18px" @keyup.enter.exact="sendMsg"
                    @keyup.ctrl.enter="lineFeed()" autofocus v-model:value="textValue" type="textarea" autosize
                    placeholder="" />
                </div>
              </div>
            </template>
          </n-split>
        </div>
      </template>
      <template v-else>
        <div style="
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            ">
          <img src="@/assets/null.png" style="width: 200px" />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, computed, watch, defineAsyncComponent, nextTick } from "vue";
import { LogInOutline as LogInIcon, Close, ArrowBack, ReturnUpForwardOutline } from "@vicons/ionicons5";
import axios from "axios";
import dayjs from "dayjs";

// all emoji sets.
import data from "emoji-mart-vue-fast/data/all.json";


import { Picker, EmojiIndex } from "emoji-mart-vue-fast/src";

// Import default CSS
import "emoji-mart-vue-fast/css/emoji-mart.css";
import word from "@/assets/word.png";
import excel from "@/assets/excel.png";
import text from "@/assets/text.png";
import exe from "@/assets/exe.png";
import unknown from "@/assets/unknown.png";
import pdf from "@/assets/pdf.png";
import zip from "@/assets/zip.png";
import ppt from "@/assets/ppt.png";

import "@vue-office/excel/lib/index.css";
const VueOfficeDocx = defineAsyncComponent(() => import('@vue-office/docx'))
const VueOfficeExcel = defineAsyncComponent(() => import('@vue-office/excel'))
const VueOfficePdf = defineAsyncComponent(() => import('@vue-office/pdf'))
import { createDiscreteApi } from "naive-ui";
import storage from "@/utils/storage";
import { userinfo, sendEmail, readUnreadInfo, getChatHistory, muserinfo, } from "@/api/chat"
import { useRouter } from "vue-router";
const router = useRouter()
const { message } = createDiscreteApi(["message"]);

const preViewItem = ref({});
const createBlob = (file) => {
  const blob = new Blob([file], { type: file.type });
  const url = URL.createObjectURL(blob);
  return url;
};
const MAXCOUNT = 4
const handleDownload = async (url, filename) => {
  btnLoading.value = true

  try {
    const response = await fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/octet-stream'
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // 获取文件类型
    const contentType = response.headers.get('content-type');
    const blob = await response.blob();
    if (blob) {
      btnLoading.value = false
      // 创建一个 a 标签并触发点击事件来下载文件
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = filename;
      link.click();

      // 清理
      URL.revokeObjectURL(link.href);
    }

  } catch (error) {
    console.error('Error downloading file:', error);
    // 可以在这里添加额外的错误处理逻辑
  }
}


const handlePreview = (e, type) => {
  if (!type) {
    preViewItem.value = e;
  } else {
    preViewItem.value = {
      type: e.type,
      blobUrl: e.content,
    };
  }
  console.log(preViewItem.value)


  previewModal.value = true;
};

const IuploadFile = () => {
  return new Promise((resolve, reject) => {
    const formdata = new FormData();
    for (const item of fileList.value) {
      formdata.append("wxfile", item.file.file);
    }
    upload(formdata).then((res) => {
      if (res.data.code == 200) {
        let data = res.data.data;
        resolve(data);
      } else {
        reject(res);
      }
    })
  });
};

const uploadLoading = ref(false);

const handleFileSend = () => {
  if (!uploadLoading.value) {
    uploadLoading.value = true;
    IuploadFile()
      .then((res) => {
        let lists = res;
        lists = lists.map((e) => {
          return {
            ...e,
            type: determineFileType(getFileExtension(e.name), "url").type,
          };
        });

        for (let list of lists) {
          let obj = {
            tid: toItem.value._id,
            fid: window.localStorage.getItem("id"),
            time: new Date().getTime(),
            type: list.type,
            content: list.url,
            opType: "file",
            remark: list.name,
          };
          socket.value.send(JSON.stringify(obj));
        }
      })
      .catch((err) => {
        if (err.data.code == 202) {
          message.error("文件过大");
        }
      })
      .finally(() => {
        fshowModal.value = false;
        if (fileText.value) {
          let obj = {
            tid: toItem.value._id,
            fid: window.localStorage.getItem("id"),
            time: new Date().getTime(),
            type: "text",
            content: fileText.value,
            opType: "msg",
          };
          socket.value.send(JSON.stringify(obj));
          fileText.value = "";
        }
        uploadLoading.value = false;
      });
  }
};

const handleDelete = (i) => {
  fileList.value.splice(i, 1);

  if (fileList.value.length == 0) {
    fshowModal.value = false;
  }
};

const customRequest = async ({ file }) => {
  let res = createBlob(file.file);
  let ext = getFileExtension(file.name);
  let { icon, type } = determineFileType(ext, res);

  var obj = {};

  if (type == "video") {
    let ress = await getVideoBobUrl(res);

    obj = {
      file: file,
      blobUrl: res,
      preicon: ress,
      type: type,
    };
  } else {
    obj = {
      file: file,
      blobUrl: res,
      preicon: icon,
      type: type,
    };
  }

  fileList.value.push(obj);
  fshowModal.value = true;
};
const modelClose = () => {
  fileList.value = [];
};
const showModal = ref(false);
const fshowModal = ref(false);
const previewModal = ref(false);
const { dialog } = createDiscreteApi(["dialog"]);

const { notification } = createDiscreteApi(["notification"]);

const nameValue = ref("");

const handlePopModifyInfo = (name) => {
  nameValue.value = name;
  showModal.value = true;
};
const fileList = ref([]);
const wname = computed(() => (id) => {
  return list.value.filter((e) => e._id == id)[0].userName;
});

const vuserinfo = ref({});

const cleardata = () => {
  dialog.warning({
    title: "警告",
    content: "确定退出",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: () => {

      router.replace("/login");
      message.success("退出成功");
      storage.clear();
    },
    onNegativeClick: () => { },
  });
};

const modifyName = (id, name) => {
  // modifyUserInfo  readUnreadInfo, getChatHistory, muserinfo
  muserinfo({
    id: id,
    name: name,
  }).then((res) => {
    getUserInfo();
  })

};

const searchChange = (e) => {
  if (!e) {
    return (vlist.value = list.value
      .filter((e) => e._id != id.value.replace(/^"|"$/g, ''))
      .sort((a, b) => b.loginTime - a.loginTime));
  }
  vlist.value = vlist.value
    .filter((es) => es.userName.includes(e))
    .sort((a, b) => b.loginTime - a.loginTime);
};

const getFileExtension = (fileName) => {
  const dotIndex = fileName.lastIndexOf(".");
  if (dotIndex > -1) {
    return fileName.slice(dotIndex + 1);
  }
  return ""; // 如果文件名中没有点，返回空字符串
};

const determineFileType = (fileExtension, url) => {
  const fileTypes = {
    docx: { icon: word, type: "word" },
    pdf: { icon: pdf, type: "pdf" },
    pptx: { icon: ppt, type: "ppt" },
    txt: { icon: text, type: "textFile" },
    jpg: { icon: url, type: "image" },
    jpeg: { icon: url, type: "image" },
    png: { icon: url, type: "image" },
    gif: { icon: url, type: "image" },
    svg: { icon: url, type: "image" },
    mp3: { icon: url, type: "video" },
    mp4: { icon: url, type: "video" },
    avi: { icon: url, type: "video" },
    mov: { icon: url, type: "video" },
    zip: { icon: zip, type: "zip" },
    rar: { icon: zip, type: "zip" },
    tar: { icon: zip, type: "zip" },
    gz: { icon: zip, type: "zip" },
    exe: { icon: exe, type: "exe" },
    xlsx: { icon: excel, type: "excel" },
  };

  return (
    fileTypes[fileExtension.toLowerCase()] || { icon: unknown, type: "unknown" }
  );
};

const getVideoBobUrl = (url) => {
  return new Promise(function (resolve, reject) {
    let dataURL = "";
    let video = document.createElement("video");
    video.setAttribute("crossOrigin", "anonymous"); //处理跨域
    video.setAttribute("src", url);
    video.setAttribute("width", 400);
    video.setAttribute("height", 240);

    video.addEventListener("loadeddata", function () {
      video.currentTime = 2;

      setTimeout(() => {
        let canvas = document.createElement("canvas");
        let width = video.width; //canvas的尺寸和图片一样
        let height = video.height;
        canvas.width = width;
        canvas.height = height;

        const ctx = canvas.getContext("2d");
        ctx.drawImage(video, 0, 0, width, height);

        function drawPlayButton(ctx, width, height) {
          // 播放按钮的大小和位置
          let buttonSize = Math.min(width, height) * 0.35; // 按钮大小为视频宽度或高度的15%
          let x = (width - buttonSize) / 2; // 按钮中心点的X坐标
          let y = (height - buttonSize) / 2; // 按钮中心点的Y坐标

          // 绘制三角形（播放按钮），这里将三角形的尺寸减少10%
          ctx.beginPath();
          ctx.moveTo(x + buttonSize / 3, y);
          ctx.lineTo(x + buttonSize / 3, y + buttonSize);
          ctx.lineTo(x + buttonSize, y + buttonSize / 2);
          ctx.closePath();
          ctx.fillStyle = "#42ba84"; // 白色
          ctx.fill();
        }

        // 调用函数绘制播放按钮
        drawPlayButton(ctx, width, height);

        dataURL = canvas.toDataURL("image/jpeg"); //转换为base64
        resolve(dataURL);
      }, 500);
    });
  });
};

const onPositiveClick = () => {
  if (vuserinfo.value._id && nameValue.value) {
    modifyName(vuserinfo.value._id, nameValue.value);
  } else {
    message.error("数据异常");
  }
};
// 定义i18n
const emojiI18n = {
  search: "搜索",
  notfound: "没有此表情包",
  categories: {
    search: "搜索结果",
    recent: "经常使用",
    smileys: "表情",
    people: "人体",
    nature: "动物",
    foods: "饮食",
    activity: "活动",
    places: "旅行",
    objects: "物品",
    symbols: "符号",
    flags: "旗帜",
    custom: "自定义",
    joy: "哭笑",
  },
};
const emojiIndex = new EmojiIndex(data);
// 选中emoji
const handleEmoji = (e) => {
  textValue.value += e.native;
};

const uidToName = computed(() => (id) => {
  return "";
});

const { proxy } = getCurrentInstance();
const flag = ref(false);
const centerWidth = ref(250);
const lock = ref(false);

const toTime = computed(() => (val) => {
  return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
});

const isDetail = ref(false);
const clastmsg = computed(() => (val) => {
  if (!val) {
    return "";
  } else {
    let res = val.filter((es) => {
      return (
        (es.fid == es.fid && es.tid == id.value.replace(/^"|"$/g, '')) ||
        (es.fid == id.value.replace(/^"|"$/g, '') && es.tid == es.tid)
      );
    });



    if (res && res.length > 0) {
      let item = res.sort((a, b) => a.time - b.time)[res.length - 1];

      switch (item.type) {
        case "text":
          return res.sort((a, b) => a.time - b.time)[res.length - 1].lastword;

        case "image":
          return `[图片]`;

        case "video":
          return "[视频]";

        case "word":
          return "[DOC文件]";

        case "exe":
          return "[EXE文件]";

        case "pdf":
          return "[PDF文件]";

        case "textFile":
          return "[文本文件]";

        case "excel":
          return "[EXCEL文件]";

        case "zip":
          return "[压缩文件]";

        default:
          return "[未知文件]";
      }
    }
  }
});

const cunreadnum = computed(() => (val) => {
  if (!val) {
    return 0;
  } else {
    let res = val.filter((es) => {
      return (
        (es.fid == es.fid && es.tid == id.value.replace(/^"|"$/g, '')) ||
        (es.fid == id.value.replace(/^"|"$/g, '') && es.tid == es.tid)
      );
    });
    if (res && res.length > 0) {
      return `${res.sort((a, b) => a.time - b.time)[res.length - 1].unreadnum}`;
    } else {
      return 0;
    }
  }
});
// 判断时间戳是否为今天的函数
const isToday = computed(() => (timestamp) => {
  const today = dayjs().startOf("day"); // 今天的开始时间
  const inputDay = dayjs(timestamp).startOf("day"); // 输入时间戳所在天的开始时间
  return today.isSame(inputDay); // 比较是否相同
});
const id = computed(() => {
  return (
    window.localStorage.getItem("id") || Math.random().toString(36).substring(8)
  );
});
const chooseIndex = ref(0);
const count = ref(100);
const centerMinFixWidth = ref(300);
const centerMaxFixWidth = ref(350);
const xheight = ref(0);
const cIndex = ref(-1);
const textValue = ref("");
const autoHeight = ref(0);
const autoYHeight = ref(0);
const toId = ref("");
const toItem = ref("");
const socket = ref("");
const btnLoading = ref(false)
const baseUrl = ref(`${import.meta.env.VITE_APIURL}`);
const wsBaseUrl = ref(`${import.meta.env.VITE_WSURL}`);
let sendlimit = ref({
  islock: false,
});
const fileText = ref("");
const getUserInfo = (id) => {
  return new Promise((resolve, reject) => {
    userinfo(id).then((res) => {
      if (res.code == 200) {
        storage.set("userinfo", res.data);
        vuserinfo.value = res.data;
      }
      resolve(res);

    })
      .catch((err) => {
        reject(err);
      });
  });
};
const lineFeed = () => {
  textValue.value = textValue.value + "\n";
};

const sendMsg = () => {
  if (!textValue.value) {
    notification.info({
      content: "请先输入内容",
    });
    return;
  }
  if (sendlimit.value.islock == true) {
    notification.info({
      content: "请稍后重试",
    });
    return;
  } else {
    sendlimit.value.islock = true;
    let obj = {
      tid: toItem.value._id,
      fid: id.value.replace(/^"|"$/g, ''),
      time: new Date().getTime(),
      type: "text",
      content: textValue.value,
      opType: "msg",
    };

    socket.value.send(JSON.stringify(obj));
    setTimeout(() => {
      sendlimit.value.islock = false;
    }, 1500);
  }

  textValue.value = "";
};
const fitShow = ref(true);
onMounted(() => {
  window.addEventListener("resize", () => {
    inittt();
    xheight.value = window.innerHeight - 66;
  });
  inittt();
  xheight.value = window.innerHeight - 66;
});
const inittt = () => {
  let autoXHeight = window.innerHeight - 66;
  autoYHeight.value = autoXHeight * 0.6 - 2;
  autoHeight.value = autoXHeight * 0.4 - 40;
  if (window.innerWidth < 700) {
    fitShow.value = false;
  } else {
    fitShow.value = true;
  }
};
const vlist = ref([]);
const chooseListMember = (e, i) => {
  cIndex.value = i;
  toItem.value = e;

  // modifyUserInfo  readUnreadInfo, getChatHistory, muserinfo

  getChatHistory({
    tid: toItem.value._id,
    fid: window.localStorage.getItem("id"),
  })
    .then((res) => {
      msglist.value = res.data;
      IreadUnreadInfo(toItem.value);
      scrollToBottom();

      if (!fitShow.value) {
        isDetail.value = true;
      } else {
      }
    });
};

const dealTime = computed(() => (time) => {
  const today = dayjs().startOf("day"); // 今天的开始时间

  const inputDay = dayjs(time).startOf("day"); // 输入时间戳所在天的开始时间

  if (today.isSame(inputDay)) {
    return dayjs(time).format("YYYY-MM-DD HH:mm:ss").split(" ")[1];
  } else {
    return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
  }
});

const handleLoad = () => {
  console.log("加载完毕");
};
const tt = (e) => {
  let autoXHeight = window.innerHeight - 66;
  autoYHeight.value = autoXHeight * +e - 2;
  autoHeight.value = autoXHeight * (1 - +e) - 40;
};
const iptValue = ref("");

const list = ref([]);
const msglist = ref([]);

const statusToNumber = {
  0: "CONNECTING",
  1: "OPEN",
  2: "CLOSING",
  3: "CLOSED",
};

const scrollToBottom = () => {
  let div = document.getElementById("conversationalDiv");
  if (div) {
    setTimeout(() => {
      // 设置滚动的顶点坐标为滚动的总高度
      div.scrollTop = 999999999;
    }, 40);
  }
};
const reconnectInterval = ref(null)
const IreadUnreadInfo = (ele) => {
  let item = ele.lastMsg.filter(
    (es) => es.fid == ele._id && es.tid == id.value.replace(/^"|"$/g, '')
  );
  if (item && item.length > 0) {

    // modifyUserInfo  readUnreadInfo, getChatHistory, muserinfo

    readUnreadInfo({ fdata: ele, sdata: item[0] })
      .then((res) => {
        list.value = res.data.data;
        vlist.value = res.data.data
          .filter((e) => e._id != id.value.replace(/^"|"$/g, ''))
          .sort((a, b) => b.loginTime - a.loginTime);
      })
      .catch((err) => {
        console.log(err, "err");
      });
  }
};
const backhome = () => {
  isDetail.value = false;
};
const sloading = ref(false)
const IsendEmail = () => {
  sloading.value = true

  // userinfo,, readUnreadInfo, getChatHistory, muserinfo

  sendEmail().then((res) => {
    if (res.data.code == 200) {
      notification.info({
        content: "邮件提醒成功！",
      });
    } else {
      notification.info({
        content: "邮件发送失败！",
      });
    }

  }).finally(() => {
    sloading.value = false
  });
}
const rcount = ref(0)
const socketConnect = () => {
  rcount.value++
  let token = storage.get('token')
  // 创建一个新的 Websocket 实例
  try {
    socket.value = new WebSocket(`${wsBaseUrl.value}/mws?token=${token}`);
  } catch (error) {
    console.error('WebSocket 连接失败:', error);
    return;
  }
  //1验证身份
  //2链接socket
  let userinfo = storage.get('userinfo')
  // 连接打开时触发
  socket.value.addEventListener("open", function (event) {
    getUserInfo(userinfo._id).then((res) => {
      if (res.code == 200) {
        id.value = storage.get('id')

      } else {

        message.info(JSON.stringify(res))

      }
    }).catch(err => {
      console.log(err, 'err')
    });



    socket.value.send(JSON.stringify({ uid: userinfo._id }));
    // 接收消息时触发
    if (reconnectInterval.value) {
      clearInterval(reconnectInterval.value);
      reconnectInterval.value = null
      reConnectLoading.value = false
    }
  });



  socket.value.addEventListener("message", function (event) {
    if (event.data === 'ping') {
      ws.send('pong'); // 响应心跳
    } else {
      let data = JSON.parse(event.data);

      if (data.type == "list") {
        list.value = data.data;
        vlist.value = list.value
          .filter((e) => (e._id != id.value.replace(/^"|"$/g, '')))
          .sort((a, b) => b.loginTime - a.loginTime);
      }

      if (data.type == "message") {
        let lastMsg = data.data.sort((a, b) => a.time - b.time)[
          data.data.length - 1
        ];

        if (!id.value.replace(/^"|"$/g, '') || lastMsg.fid != toItem.value._id) {
          if (lastMsg.fid == id.value.replace(/^"|"$/g, '')) {
            console.log("当前会话");
            msglist.value = data.data;

            scrollToBottom();
          } else {
            console.log("非当前会话");
            let index = vlist.value.findIndex((e) => e._id == lastMsg.fid);
            if (index < 0) {
              console.log("暂无此用户");
            } else {
              let item = vlist.value[index].lastMsg.filter(
                (es) => es.fid == lastMsg.fid && es.tid == id.value.replace(/^"|"$/g, '')
              );
              if (item && item.length > 0) {
                // readUnreadInfo, getChatHistory, muserinfo
                modifyUserInfo({
                  fdata: vlist.value[index],
                  sdata: item[0],
                })
                  .then((res) => {
                    vlist.value = res.data.data
                      .filter((e) => e._id != id.value.replace(/^"|"$/g, ''))
                      .sort((a, b) => b.loginTime - a.loginTime);
                    list.value = res.data.data;
                    console.log('target')
                  })
                  .catch((err) => {
                    console.log(err, "err");
                  });
              } else {
                console.log("数据非法");
              }
            }
          }
        } else {
          console.log("当前会话");
          msglist.value = data.data;

          scrollToBottom();
        }
      }
    }



  });
  // 连接关闭时触发
  socket.value.addEventListener("close", async function (event) {
    startReconnect()
  });

  // 连接关闭时触发
  socket.value.addEventListener("error", function (error) {
  });
}

const reConnectLoading = ref(false)

const startReconnect = () => {
  reConnectLoading.value = true
  if (!reconnectInterval.value) {
    reconnectInterval.value = setInterval(() => {
      if (statusToNumber[socket.value.readyState] == 'CLOSED') {
        if (rcount.value <= MAXCOUNT) {
          socketConnect()
        } else {
          clearInterval(reconnectInterval.value)
          reconnectInterval.value = null
          reConnectLoading.value = false
          message.error('网络连接失败，请检查网络')
          router.replace('/login')
        }

      } else {
        console.log('!CLOSED')
      }
    }, 5000)
  }
}
socketConnect()




</script>

<style lang="scss" scoped>
.previewBox {
  height: 100%;
  max-height: 700px;
  width: 100%;

  overflow: scroll;
}

.previewBox::-webkit-scrollbar-thumb {
  background: #e6e6e6;
}

::-webkit-scrollbar {
  width: 6px; // 高宽分别对应横竖滚动条的尺寸
  height: 1px;
}

// 滚动条里面小方块
.center::-webkit-scrollbar-thumb {
  // background-color: transparent;
  background: transparent;
}

// 滚动条里面轨道
::-webkit-scrollbar-track {
  background: transparent;
}

// 滚动条上下的箭头按钮
::-webkit-scrollbar-button {
  background: transparent;
}

#conversationalDiv {
  scroll-behavior: smooth;
}

.nipt {
  height: calc(100% - 40px);
  width: 100%;
}

.rbottom {
  height: calc(100% - 66px);
}

.acitem {
  background-color: #c4c4c5 !important;
}

:deep(.n-input .n-input-wrapper) {
  padding: 0 !important;
}

:deep(.n-input__textarea) textarea {
  background-color: #f5f5f5 !important;
  padding: 15px !important;
}

.item {
  width: 100%;
  height: 80px;
  // border: 1px solid purple;
  padding: 10px 14px;
  box-sizing: border-box;
  background-color: #e7e6e6;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .cright {
    width: calc(100% - 58px);
    margin-left: 10px;
    height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .top {
      display: flex;
      justify-content: space-between;
    }
  }

  &:hover {
    background-color: #d7d8d9;
  }
}

.bot {
  height: 400px;
  width: 100%;
}

.t {
  cursor: col-resize;
}

svg {
  width: 32px;
  height: 40px;
  margin-top: 10px;
  cursor: pointer;
}

.main {
  width: 100%;
  height: 100vh;

  box-sizing: border-box;
  display: flex;

  .left {
    width: 80px;
    position: relative;
    height: 100vh;
    background-color: #2e2e2e;
    flex-shrink: 0;
    box-sizing: border-box;
    padding-top: 50px;
    display: flex;
    align-items: center;
    flex-direction: column;

    .avator {
      width: 60px;
      height: 60px;

      border-radius: 6px;
      background: url("@/assets/avator.jpg") no-repeat;
      background-size: 100% 100%;
    }

    .btns {
      display: flex;
      margin-top: 30px;
      flex-direction: column;
    }
  }

  .center {
    user-select: none;
    height: 100%;
    background-color: #fff;
    overflow: scroll;
  }

  .right {
    min-width: 300px;
    height: 100%;
    flex: 2;
  }
}
</style>
